<template>
  <div class="sub-sort">
    <div class="sort">
      <div class="left">
        <section v-for="(item, index) in info" :key="index">
          <input
            type="radio"
            class="ch"
            name="sort"
            :value="item.sortField"
            :id="index"
          />
          <label @click="setSortField(item.sortField)" :for="index">{{
            item.name
          }}</label>
        </section>
        <section class="sortPrice" style="position: relative">
          <input class="price" type="radio" id="sortPrice" name="sort" />
          <label for="sortPrice" @click="setSortPrice">价格排序</label>
          <p>
            <i class="arrow up" :class="{ asc: isPrice == 'asc' }" />
            <i class="arrow down" :class="{ desc: isPrice == 'desc' }" />
          </p>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // 接收按钮组的变量
  props: ["btnObj"],
  data() {
    return {
      info: [
        { name: "默认排序", id: 0, sortField: null },
        { name: "最新商品", id: 1, sortField: "publishTime" },
        { name: "最高人气", id: 2, sortField: "orderNum" },
        { name: "评论最多", id: 3, sortField: "evaluateNum" },
      ],
      isPrice: null,
    };
  },
  methods: {
    // 点击前四个按钮
    setSortField(sortField) {
      this.$emit("setSortField", sortField);
    },
    // 点击的价格排序的时候
    setSortPrice() {
      if (!this.isPrice) {
        this.isPrice = "desc";
      } else {
        this.isPrice = this.isPrice == "desc" ? "asc" : "desc";
      }
      this.$emit("setSortPrice", this.isPrice);
    },
  },
};
</script>
<style scoped lang="scss">
.desc {
  border-top-color: #27ba9b !important;
}
.asc {
  border-bottom-color: #27ba9b !important;
}
.a {
  background-color: #27ba9b;
  color: rgb(255, 255, 255) !important;
}
.sub-sort {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  margin-top: 25px;
  .sort {
    display: flex;
    .left {
      display: flex;
      section {
        input {
          display: none;
        }
        label {
          display: inline-block;
          height: 30px;
          line-height: 28px;
          border: 1px solid #e4e4e4;
          padding: 0 20px;
          margin-right: 20px;
          color: #999;
          border-radius: 2px;
          position: relative;
          transition: all 0.3s;
        }
      }
    }
    &.active {
      background: #27ba9b;
      border-color: #27ba9b;
      color: #fff;
    }
  }
  .check {
    .xtx-checkbox {
      margin-left: 20px;
      color: #999;
    }
  }
}
.sortPrice {
  display: flex;
  position: relative;
  p {
    width: 20px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    position: absolute;
    top: 0;
    right: 18px;
  }
}
.arrow {
  width: 0;
  height: 0;
  border: 5px solid transparent;
}
.up {
  border-bottom-color: #ccc;
  margin-top: 5px;
}
.down {
  border-top-color: #ccc;
  margin-top: 2px;
}
.ch:checked + label {
  background-color: #27ba9b !important;
  color: white !important;
}
</style>
